<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      background-color: #eee;
    }
    .container {
      background-color: #eee;
    }
    .box {
      position: relative;
      transform: translateX(-50%);
      margin-top: 50px;
      left: 50%;
      width: 600px;
      height: 50px;
      background-color: #ddd;
    }
    .box img {
      width: 40px;
      height: 40px;
      border-radius: 100%;
      object-fit: cover;
      position: absolute;
      top: 5px;
      left: 5px;
    }
    .box .form {
      display: flex;
      position: absolute;
      top: 50%;
      left: 45%;
      transform: translate(-50%, -50%);
    }
    .box .form input {
      width: 360px;
      height: 36px;
      box-sizing: border-box;
      border: none;
      outline: none;
      padding: 0 4px;
      font-size: 18px;
    }
    .box .form .submit {
      width: 60px;
      height: 36px;
      box-sizing: border-box;
      background-color: #ffa500;
      text-align: center;
      line-height: 36px;
      color: #fff;
      cursor: pointer;
    }
    .box .flag{
      position: absolute;
      width: 40px;
      height: 40px;
      border-radius: 100%;
      top: 5px;
      right: 5px;
      background-color: #fff;
      text-align: center;
      line-height: 36px;
      font-size: 30px;
      cursor: pointer;
      user-select: none;
    }
    .content {
      width: 600px;
      margin: 0 auto;
      background-color: white;
      list-style: none;
      padding: 0;
      box-sizing: border-box;
    }
    .content li {
      position: relative;
      width: 100%;
      height: 50px;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      line-height: 50px;
    }
    .content li img {
      position: absolute;
      top: 15px;
      left: 10px;
      width: 40px;
      height: 40px;
      border-radius: 100%;
      border: 1px solid #ddd;
      object-fit: cover;
    }
    .content li .text {
      position: absolute;
      left: 60px;
      font-size: 18px;
    }
    .content li .date {
      position: absolute;
      right: 4px;
      bottom: 0;
      font-size: 12px;
    }
    .hidden {
      display: none !important;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">
      <img src="./images/薇尔莉特03.jpg" alt="">
      <div class="form hidden">
        <input type="text">
        <div class="submit">发表</div>
      </div>
      <div class="flag">+</div>
    </div>
    <ul class="content"></ul>
  </div>

  <script>
    const avtars = ["./images/慧慧01.jpg", "./images/慧慧03.jpg", "./images/七宫智音02.jpg", "./images/时崎狂三03.jpg", "./images/薇尔莉特03.jpg", "./images/五河琴里01.jpg", "./images/御坂美琴02.jpg", "./images/鸢一折纸03.jpg"]
    // 表单节点
    const formNode = document.querySelector(".form")
    // +-切换节点
    const flagNode = document.querySelector(".flag")
    // 发表按钮
    const submitNode = document.querySelector(".submit")
    // 评论区节点
    const contentNode = document.querySelector(".content")
    // 创建li标签
    function createLiElement(text, date, imgUrl) {
      const liEl = document.createElement("li")
      const imgEl = document.createElement("img")
      imgEl.src = imgUrl
      const textSpanEL = document.createElement("span")
      textSpanEL.className = "text"
      textSpanEL.innerHTML = text
      const dateSpanEl = document.createElement("span")
      dateSpanEl.className = "date"
      dateSpanEl.innerHTML = date
      liEl.appendChild(imgEl)
      liEl.appendChild(textSpanEL)
      liEl.appendChild(dateSpanEl)
      return liEl
    }
    // 绑定点击事件
    flagNode.addEventListener("click", (event) => {
      if (event.target.innerHTML === "+") {
        formNode.className = "form"
        flagNode.innerHTML = "-"
      } else {
        formNode.className = "form hidden"
        flagNode.innerHTML = "+"
      }
    })
    submitNode.addEventListener("click", () => {
      if (document.querySelector(".form input").value === "") return alert("请不要无语。。。")
      const imgUrl = document.querySelector(".box>img").src
      const liEl = createLiElement(document.querySelector(".form input").value, new Date().toLocaleString(), imgUrl)
      contentNode.childNodes.length === 0 ? contentNode.appendChild(liEl) : contentNode.insertBefore(liEl, contentNode.childNodes[0])
      document.querySelector(".form input").value = ""
      const index = Math.floor(Math.random() * 8)
      document.querySelector(".box>img").src = avtars[index]
    })
  </script>
</body>
</html>